<template>
	<view class="container">
		<!-- 视图 -->
		<view class="charts_box" style="padding-top: 100rpx;">
			<qiun-data-charts type="gauge" :chartData="chartData1" background="none" />
		</view>
		<!-- 标题内容区 -->
		<view class="info_card">
			<title-component titleName="钱包" :isShow="isShow"></title-component>
			<view class="info_detail">
				钱包地址
				<view class="wallent_location">
					0x5fd9d3c9c192b2799400ac5c3b1dedc9f01e3abf
				</view>
			</view>
			<title-component titleName="汇率" :isShow="isShow"></title-component>
		</view>
		<view class="line_view">
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartData2" background="none" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				chartData1: {
					// 配置各区域所占比重
					"categories": [{
							"value": 0.2,
							"color": "#1890ff"
						},
						{
							"value": 0.8,
							"color": "#2fc25b"
						},
						{
							"value": 1,
							"color": "#f04864"
						}
					],
					// 配置指针指导
					"series": [{
						"data": 0.8
					}]
				},
				chartData2: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
							"name": "充值汇率",
							"data": [
								35,
								8,
								25,
								37,
								4,
								20
							]
						},
						{
							"name": "提现汇率",
							"data": [
								70,
								40,
								65,
								100,
								44,
								68
							]
						},
					]
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.line_view {
		padding-right: 30rpx;
		padding-top: 40rpx;
	}

	.charts_box {
		width: 100%;
		height: 300px;
	}

	.info_card {

		.info_detail {
			background-color: #fff;
			padding: 0 30rpx 30rpx 30rpx;
			font-size: $bsin-font-base;

			.wallent_location {
				margin-top: 12rpx;
			}
		}
	}
</style>
